# Prop Collections and Getters

<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/intro-to-prop-collections-and-getters" />

<callout-success>
	**One liner:** The Prop Collections and Getters Pattern allows your hook to
	support common use cases for UI elements people build with your hook.
</callout-success>

In typical UI components, you need to take accessibility into account. For a
button functioning as a toggle, it should have the `aria-checked` attribute set
to `true` or `false` if it's toggled on or off. In addition to remembering that,
people need to remember to also add the `onClick` handler to call `toggle`.

Lots of the reusable/flexible components and hooks that we'll create have some
common use-cases and it'd be cool if we could make it easier to use our
components and hooks the right way without requiring people to wire things up
for common use cases.

Here's a quick example:

```tsx
function useCounter() {
	const [count, setCount] = useState(initialCount)
	const increment = () => setCount(c => c + 1)
	return {
		count,
		increment,
		counterButtonProps: { children: count, onClick: increment },
	} // <-- this is the prop collection
}

function App() {
	const counter = useCounter()
	return <button {...counter.counterButtonProps} />
}
```

🦉 Note that we're moving from a collection of related components (compound
components) to a hook for the upcoming patterns. We'll bring back a `Toggle`
component that uses the hook later, but often it's useful to drop down to a
lower level of abstraction to give consumers more power and then build on top of
that. And you can definitely combine the patterns (read my old post on the
subject demonstrating how to do this with class components:
[Mixing Component Patterns](https://kentcdodds.com/blog/mixing-component-patterns)).

**Real World Projects that use this pattern:**

- [downshift](https://github.com/downshift-js/downshift) (uses prop getters)
- [conform's `getFormProps`](https://conform.guide/api/react/getFormProps) (prop
  getters)
